var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({

    template:'./public/index.html'//告诉浏览器以自己的index.html作为模板
  })],
  // 打包模式
  // mode:'development',//开发模式 不会压缩混淆，注释都在
  mode: 'production',//生产模式，是要上线的，打包的代码进行压缩 混淆（多余的换行注释去掉）确保体积小、加载速度快
  module: {//加载配置
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
        // 使用文件从右到左
      },
      {
        test:/\.less/,
          use:['style-loader','css-loader','less-loader']
      },
      {
        // 图片文件的配置（仅适用于webpack5版本）
         test:/\.(gif|png|jpeg|jpg)/,
         type:'asset'//匹配上面的文件后，webpack会把它们当做静态资源处理打包
         },
         
        //  { // webpack5默认内部不认识这些文件, 所以当做静态资源直接输出即可
        //   test: /\.(eot|svg|ttf|woff|woff2)$/,
        //   type: 'asset/resource',
        //   generator: {
        //     filename: 'font/[name].[hash:6][ext]'
        //   }
      // }
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
    // ...其他配置
    devServer: {
      port: 8080 ,// 端口号
      open:true
    }
};